{% extends 'base_backend.html' %}
{% load static %}
{% load my_filter %}

{% block header_tail %}
<link rel="stylesheet" href="{% static 'zhongbao/zhongbao_admin/css/style.css' %}">
<link rel="stylesheet" href="{% static 'zhongbao/zhongbao_admin/css/iconfont.css' %}">
<link rel="stylesheet" href="{% static 'plugins/datatables/dataTables.bootstrap.css' %}">
<link rel="stylesheet" href="{% static 'public/ComboSelect/css/combo.select.css' %}">
<link rel="stylesheet" href="{% static 'zhongbao/config/css/main.css' %}">
<link rel="stylesheet" href="{% static 'laydate/theme/default/laydate.css' %}">
<script src="{% static 'laydate/laydate.js' %}"></script>
<script src="{% static 'plugins\jQuery\jquery-2.2.3.min.js' %}"></script>

<script src="{% static 'plugins/vue1/vue.js' %}"></script>
<style>
    .drag_content {
        border: 3px dashed gray;
        border-radius: 10px;
        /*margin: 10px 20px;*/
        height: {{ height_num }}px;
        overflow: auto;
        /*padding: 2px 8px;*/
    }

    .drag_head {
        margin: 0px;
        font-size: 30px;
        color: #aaa;
    }

    .drag_footer {
        margin: 5px auto
    }

    .drag_btn {
        border-radius: 20px;
        box-sizing: border-box;
        border-width: 2px;
        background-color: transparent;
        font-size: 14px;
        font-weight: 500;
        padding: 7px 18px
    }

    /*表格样式*/
    .drag_table {
        width: 100%;
        border-collapse: collapse;
    }

    #drag_content tr:first-child td {
        border-top-width: 0px;
    }

    #drag_content tr td:last-child {
        cursor: pointer;
        color: red;
    }

    #drag_content tr td {
        padding: 8px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        border-top: 1px solid #9A9A9A;
    }

    #drag_content tr:hover {
        background-color: #d5d5d5;
    }

    #drag_content tr:active {
        background-color: #9A9A9A;
    }
</style>
{% endblock header_tail %}

{% block section_content %}

<div>
    <div class="box-header with-border">
        <h3 class="box-title">
            微信点赞任务
        </h3>
    </div>
    <!-- form start -->
    <div class="box box-primary">
        <div class="box-header with-border" style="border-color: #1b6d85">
            <!-- Date range -->
            <form role="form" id="searchForm" method="get" action="">
                <input name="author" type="hidden" class="config-input" value="{{ author }}">
                <div style="width: 95%; float: left;">
                    <div style="float: left;" class="input-group select-config-div">
                        <label for="tid" class="control-label">任务ID：</label>
                        <p>
                            <input id="tid" name="tid" type="text" class="config-input">
                        </p>
                    </div>
                    <div style="float: left;" class="input-group select-config-div">
                        <label for="sub_taskId" class="control-label">用户ID：</label>
                        <input id="userId" type="text" name="userId" class="config-input">
                    </div>
                    <div style="float: left;" class="input-group select-config-div">
                        <label for="sub_taskId" class="control-label">子任务ID：</label>
                        <input id="sub_taskId" type="text" name="sub_taskId" class="config-input">
                    </div>
                    <div style="float: left;" class="input-group select-config-div">
                        <label for="taskId" class="control-label">主任务ID：</label>
                        <input id="taskId" type="text" name="taskId" class="config-input">
                    </div>
                    <div style="float: left;" class="input-group select-config-div">
                        <label for="url" class="control-label">任务URL：</label>
                        <input id="url" type="text" name="url" class="config-input">
                    </div>
                    <div style="float: left;" class="input-group select-config-div">
                        <label for="audit_status" class="control-label">状态：</label>
                        <select name="audit_status" id="audit_status" class="config-input">
                            <option value="">----------</option>
                            {% for state in audit_status_list %}
                            {% if audit_status == state.code %}
                            <option selected="selected" value="{{ state.code }}">{{ state.name }}</option>
                            {% else %}
                            <option value="{{ state.code }}">{{ state.name }}</option>
                            {% endif %}
                            {% endfor %}
                        </select>
                    </div>
                    <div style="float: left;" class="input-group select-config-div">
                        <label for="audit_status" class="control-label">是否过期：</label>
                        <select name="is_late" id="is_late" class="config-input">
                            {% for late in is_late_list %}
                            {% if is_late == late.code %}
                            <option selected="selected" value="{{ late.code }}">{{ late.name }}</option>
                            {% else %}
                            <option value="{{ late.code }}">{{ late.name }}</option>
                            {% endif %}
                            {% endfor %}
                        </select>
                    </div>
                    <div style="float: left;" class="input-group select-config-div">
                        <label for="audit_status" class="control-label">任务类型：</label>
                        <select name="task_type" id="task_type" class="config-input">
                            <option value="">----------</option>
                            {% for ttype in task_type_list %}
                            {% if task_type == ttype.code %}
                            <option selected="selected" value="{{ ttype.code }}">{{ ttype.name }}</option>
                            {% else %}
                            <option value="{{ ttype.code }}">{{ ttype.name }}</option>
                            {% endif %}
                            {% endfor %}
                        </select>
                    </div>
                    <div style="float: left;" class="input-group select-config-div">
                        <label for="id" class="control-label">每页显示：</label>
                        <select name="limit" id="showNumSelect" class="config-input">
                            {% for i in limits %}
                            {% if i == limit %}
                            <option selected="selected" value="{{ i }}">{{ i }}条</option>
                            {% else %}
                            <option value="{{ i }}">{{ i }}条</option>
                            {% endif %}
                            {% endfor %}
                        </select>
                    </div>
                </div>
                <div class="input-group" style="width: 5%; float: right; margin-top: 70px;">
                    <input type="submit" class="form-control pull-left btn btn-sm btn-primary" value="检索">
                </div>
            </form>
        </div>
        <!-- 展示搜索出来的任务 -->
        <div id="main">
            <div class="box-body">
                <form id="model_form" role="form" method="post">{% csrf_token %}
                    <div class="group">
                        <table id="task_each_table" border="1" class="table table-bordered table-hover table-striped">
                            <tr>
                                <th>
                                    <span style="float: left">
                                        用户名
                                    </span>
                                </th>
                                <th>
                                    <span style="float: left">
                                        描述（序号 | URL | 任务类型 | 次数）
                                    </span>
                                </th>
                                <th rowspan="{{ task_list|length|add:1 }}">
                                    <div>
                                        <p class="drag_head"><b>拖拽文件至此</b></p>
                                        <div class="drag_content" id="drag_content">
                                            <table class="drag_table">
                                                <tbody class="drag_tbody"></tbody>
                                            </table>
                                        </div>
                                    </div>
                                </th>
                                <th>
                                    <span style="float: left">
                                        操作
                                    </span>
                                </th>
                            </tr>
                            {% for task in task_list %}
                            <tr>
                                <td>{{ task.nickname }}</td>
                                <td>
                                    {% for i in task.detail %}
                                    <p>
                                        <span>（{{ forloop.counter }}）</span>
                                        <span>{{ i.url }}</span>
                                        <span>|</span>
                                        <span>{{ i.type | wx_task_type }}</span>
                                        <span>|</span>
                                        <span>{{ i.num }}次</span>
                                    </p>
                                    {% endfor %}
                                </td>
                                <td>
                                    <div class="drag_footer">
                                        <button type="button" class="drag_btn"
                                                onclick="upload('{{ taskId }}', '{{ task.nickname }}', '{{ task.sub_taskIds }}')">
                                            开始上传
                                        </button>
                                    </div>
                                </td>
                            </tr>
                            {% endfor %}
                        </table>
                        <p class="" id="paginator">
                            <a class="btn btn-default btn-xs" onclick="toPage('home')">首页</a>
                            <a class="btn btn-default btn-xs" onclick="toPage('last')">上一页</a>
                            <a class="btn btn-default btn-xs" onclick="toPage('next')">下一页</a>
                            <input type="text" id="page-judge" style="width: 30px;height:20px; margin-left: 20px"
                                   onkeyup="toPage('judge')">
                            <a class="btn btn-default btn-xs" onclick="toPage('next')">尾页</a>
                            <a class="btn btn-default btn-xs" onclick="toPage('judge')">跳页</a>
                            <span v-show="total">共{{ count }}个</span>
                        </p>
                    </div>
                    <!-- /.box-footer -->
                    <div class="box-footer">
                        <button class="btn btn-primary no-display" id="submit_button">确认</button>
                        <button type="button" class="btn btn-primary" id="save_submit" name="_save"
                                style="display: none">sure
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="acceptNum" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" style="top:40%">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div id="msgBoxMsg" class="modal-body" style="overflow:auto;text-align:center;">
                任务ID
                <input type="text" id="accept_taskId" disabled>
                <br>
                请输入领取任务数量
                <input type="number" id="accept_num">
            </div>
            <div class="modal-footer" style="text-align:center;">
                <button type="button" class="btn btn-default" onclick="receive_task()"
                        data-dismiss="modal">确认
                </button>
                <button type="button" class="btn btn-default"
                        data-dismiss="modal">取消
                </button>
            </div>
        </div>
    </div>
</div>


<script>
    function changeColor(id, color) {
        //$(id).parent().parent().parent().children().children().children().find("li[color='green']");
        $(id).parent().parent().addClass("active");
        $(id).children().css("color", color);
    }

    changeColor('#WeChatTaskMy', '#00FF7F');
</script>
<script>
    //利用html5 FormData() API,创建一个接收文件的对象，因为可以多次拖拽，这里采用单例模式创建对象Dragfiles
    var Dragfiles = (function () {
        var instance;
        return function () {
            if (!instance) {
                instance = new FormData();
            }
            return instance;
        }
    }());

    //添加拖拽事件
    var dz = document.getElementById('drag_content');
    dz.ondragover = function (ev) {
        //阻止浏览器默认打开文件的操作
        ev.preventDefault();
        //拖入文件后边框颜色变红
        this.style.borderColor = 'red';
    };

    dz.ondragleave = function () {
        //恢复边框颜色
        this.style.borderColor = 'gray';
    };
    dz.ondrop = function (ev) {
        //恢复边框颜色
        this.style.borderColor = 'gray';
        //阻止浏览器默认打开文件的操作
        ev.preventDefault();
        var files = ev.dataTransfer.files;
        var len = files.length, i = 0;
        var frag = document.createDocumentFragment();  //为了减少js修改dom树的频度，先创建一个fragment，然后在fragment里操作
        var tr, time, size;
        var newForm = Dragfiles(); //获取单例
        var it = newForm.entries(); //创建一个迭代器，测试用
        while (i < len) {
            tr = document.createElement('tr');
            //获取文件大小
            size = Math.round(files[i].size * 100 / 1024) / 100 + 'KB';
            //获取格式化的修改时间
            time = files[i].lastModifiedDate.toLocaleDateString() + ' ' + files[i].lastModifiedDate.toTimeString().split(' ')[0];
            tr.innerHTML = '<td>' + files[i].name + '</td><td>' + time + '</td><td>' + size + '</td><td>删除</td>';
            console.log(size + ' ' + time);
            frag.appendChild(tr);
            //添加文件到newForm
            // newForm.append(files[i].name, files[i]);
            newForm.append('screenshots', files[i]);
            //console.log(it.next());
            i++;
        }
        this.childNodes[1].childNodes[1].appendChild(frag);
        //为什么是‘1’？文档里几乎每一样东西都是一个节点，甚至连空格和换行符都会被解释成节点。而且都包含在childNodes属性所返回的数组中.不同于jade模板
    };

    //ajax上传文件
    function upload(taskId, nickname, sub_taskIds) {
        var data = Dragfiles(); //获取formData
        data.append('csrfmiddlewaretoken', '{{ csrf_token }}');
        data.append('taskID', taskId);
        data.append('nickname', nickname);
        data.append('sub_taskIds', sub_taskIds);
        $.ajax({
            url: "{% url 'WeChatTask:add_img_api' %}",
            type: 'POST',
            data: data,
            async: true,
            cache: false,
            contentType: false,
            processData: false,
            success: function (resp) {
                if (resp.code == 0) {
                    // alert(resp.message);
                    // data.deleteAll(); //清空formData
                    // $('.drag_tbody').empty(); //清空列表
                    window.location.reload();
                }else {
                    alert(resp.message);
                }
            },
            error: function (returndata) {
                alert('failed!')  //可以替换为自己的方法
            }
        });
    }

    // 用事件委托的方法为‘删除’添加点击事件，使用jquery中的on方法
    $(".drag_tbody").on('click', 'tr td:last-child', function () {
        //删除拖拽框已有的文件
        var temp = Dragfiles();
        var key = $(this).prev().prev().prev().text();
        console.log(key);
        temp.delete(key);
        $(this).parent().remove();
    });

</script>
{% endblock section_content %}
